<template>
    <div class="file-view" @contextmenu.self="contextmenu">
        <file v-for="file in files" :key="file.fileId" style="margin: 5px" :file="file"
              @refresh="getDeskTopFiles"></file>
        <a-modal
                title="新建文件夹"
                :visible="modal.newDir.visible"
                :confirm-loading="modal.newDir.loading"
                @ok="newDirOk"
                @cancel="newDirCancel"
                cancelText="取消"
                okText="确认"
        >
            <a-input placeholder="新建文件夹" v-model="modal.newDir.fileName"/>
        </a-modal>
    </div>
</template>

<script>
    import file from "./components/file"
    import sys from "../../js/windowManager"

    export default {
        name: "fileView",
        components: {
            file
        },
        data() {
            return {
                modal: {
                    newDir: {
                        visible: false,
                        loading: false,
                        fileName: "新建文件夹",
                    },
                },
                files: [],
                fileId: 0,
                selectFile: []
            }
        },
        mounted() {
            sys.setRefreshDesktop(this.getDeskTopFiles)
            this.getDeskTopFiles();
        },
        methods: {
            newDirCancel() {
                this.modal.newDir.visible = false;
                this.modal.newDir.loading = false;
                this.modal.newDir.fileName = "新建文件夹";
            },
            newDirOk() {
                this.modal.newDir.loading = true;
                this.$axios.post("/desktop/dir?name=" + this.modal.newDir.fileName).then(res => {
                    if (res.data.status == 200) {
                        this.$message.success("创建成功");
                        this.getDeskTopFiles()
                        this.newDirCancel();
                    } else {
                        this.$message.error(res.data.msg);

                    }
                });
            },
            contextmenu(e) {
                console.log(e)
                this.$contentMenu.open(e, [
                    {
                        label: "新建文件夹",
                        enable: () => {
                            return this.selectFile.length == 0;
                        },
                        call: () => {
                            this.modal.newDir.visible = true;
                        }
                    },
                    {
                        label: "刷新",
                        call: () => {
                            console.log("call")
                            this.getDeskTopFiles();
                        },
                        enable: () => {
                            return true
                        }
                    },
                    {
                        label: "复制",
                        enable: false,
                    },
                    {label: "剪切", enable: false},
                    {
                        label: "粘贴", enable: () => {
                            return !!sys.getFileClipboardFiles() && sys.getFileClipboardFiles().length
                        },
                        call: () => {

                        }
                    },
                ])
            },
            getDeskTopFiles() {
                console.log("......")
                // this.files=[];
                this.$axios.get("/desktop/files").then(res => {
                    let files = res.data.data
                    for (let i = 0; i < files.length; i++) {
                        // this.files.push(files[i])
                        files[i].fileId = ++this.fileId;
                    }
                    this.files = files;
                    console.log(files);
                    this.$forceUpdate()
                })
            },
        }
    }
</script>

<style scoped>
    .file-view {
        position: absolute;
        to: 50px;
        width: 100%;
        height: calc(100% - 20px);
        display: flex;
        flex-direction: column;
        overflow: hidden;
        padding-left: 10px;
        /*background-color: #de5454;*/
    }
</style>